Wesbos - 동영상 속도제어 Bar

---

초반 챕터에서 다뤘던 동영상 제어 중, 동영상 속도를 시각적으로 이쁘게 조절할 수 있는 Bar를 만들어 제어하는 기능을 구현해봤다.

---

로직

1. const와 addEventListener (video, speed, speed-bar, mousemove 등등)
2. mousemove에 따른 마우스 상대위치값 출력
3. speed-bar 값에 적용하여 CSS 변경
4. 재생속도(playbackRate) 값 부여
5. CSS 디테일 다듬기 (grab → grabbing 등)

---

const와 addEventListener

💡 mousedown, mouseup, mousemove 와 isDown 변수를 통해 드래그 이벤트 인식하도록 설정

const video = document.querySelector('.flex');
const stick = document.querySelector('.speed');
const speedBar = document.querySelector('.speed-bar');
// 이전 챕터에서 사용했던 방식과 동일하다.
let isDown = false;

function isClicked() {
  isDown = true;
  console.log('clicked!');
}

function cancelDown() {
  isDown = false;
}

function handleMove(e) {
  if (!isDown) return;
  console.log("it's Moving~");
}

stick.addEventListener('mousedown', isClicked);
stick.addEventListener('mouseup', cancelDown);
stick.addEventListener('mousemove', handleMove);

---

mousemove에 따른 마우스 상대적 마우스 이동값 구하기

💡 e.pageY와 offsetTop, 그리고 offsetHeight를 활용해줘야 한다.

function handleMove(e) {
  if (!isDown) return;
  y = e.pageY - stick.offsetTop; // 뒤의 offsetTop은 혹시 모를 stick 위치 변화에 대비
  percentageY = y / stick.offsetHeight;
  // 페이지 내에서의 마우스y 값을 stick의 총 높이로 나누면 stick내에서의 상대적 위치값 도출 가능
  height = Math.round(percentageY * 100) + '%';
  // 이제 이 height값을 speedBar의 height CSS값에 부여해주면 된다.
}

---

speed-bar에 height 값 적용하여 CSS 변경

💡 height값을 1% ~ 100%로 변환하여 CSS값에 넣어주면 끝

height = Math.round(percentageY * 100) + '%';
speedBar.style.setProperty('height', height);

하지만, height뿐만 아니라 innerHTML 또한 변경해줘야 한다.

playbackRate = percentageY * (max - min) + min;
textContent = playbackRate.toFixed(1) + 'x';
speedBar.innerHTML = textContent;

num.toFixed(n)

💡 숫자를 소숫점 n자리수 만큼 반올림해준다

재생속도(playbackRate) 값 부여

💡 위의 내용까지 잘 이해했다면, 굉장히 쉽다.

video.playbackRate = playbackRate;

// 이거 한 줄이면 됨!

---

최종 완성 코드

const video = document.querySelector('.flex');
const stick = document.querySelector('.speed');
const speedBar = document.querySelector('.speed-bar');
let isDown = false;

function isClicked() {
  isDown = true;
  speedBar.style.setProperty('cursor', 'grabbing');
}

function cancelDown() {
  isDown = false;
  speedBar.style.setProperty('cursor', 'grab');
}

function handleMove(e) {
  if (!isDown) return;
  const max = 4;
  const min = 0.4;
  y = e.pageY - stick.offsetTop;
  percentageY = y / stick.offsetHeight;
  height = Math.round(percentageY * 100) + '%';
  speedBar.style.setProperty('height', height);
  playbackRate = percentageY * (max - min) + min;
  textContent = playbackRate.toFixed(1) + 'x';
  speedBar.innerHTML = textContent;
  video.playbackRate = playbackRate;
}

stick.addEventListener('mousedown', isClicked);
stick.addEventListener('mouseup', cancelDown);
stick.addEventListener('mousemove', handleMove);

---